
<template>
  <div>
    <div class="my-tree">
      <el-tree
        v-if="groupTreeData"
        ref="tree"
        :data="groupTreeData"
        empty-text="未找到匹配的数据"
        :default-expand-all="true"
        :expand-on-click-node="false"
        :highlight-current="true"
        :row-key="onKey"
        :draggable="true"
        :filter-node-method="filterNode"
        @node-drop="handleDrop"
      >
        <span slot-scope="{ data }" class="custom-tree-node">
          <div
            v-if="type === 2"
            style="text-align: left"
            v-html="data.treeName"
          />
          <div v-else>
            {{ data.treeName }}
          </div>
        </span>
      </el-tree>
    </div>
    <span class="dialog-footer my-dialog-footer">
      <!-- <el-button @click="drawer = false">取 消</el-button>
      <el-button type="primary" @click="saveSort">确 定</el-button> -->
    </span>
  </div>
</template>

<script>
import { updateSequenceRecordTemplate } from '@/api/rs/recordTemplate.js'
export default {
  props: {
    groupTree: {
      required: true,
      type: Array,
      default: function () {
        return []
      }
    },
    type: {
      type: Number,
      default: null
    },
    renderHtml: {
      type: Function
    }
  },
  data() {
    return {
      documentCoaId: '',
      temp: '',
      filterText: '',
      groupTreeData: []
    }
  },
  watch: {
    moveFileData(data) {
      this.documentCoaId = data.id
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    groupTree: {
      async handler(data) {
        this.$nextTick(() => {
          data.forEach((e) => {
            if (this.type === 2) {
              e.treeName = this.renderHtml(e.content, e.recordTemplateItemId)
            } else {
              e.treeName = e.recordTemplateGroupName
            }
          })
          this.groupTreeData = data
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    // 节点显示
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    handleDrop(draggingNode, dropNode, dropType, ev) {
      let parentId = null
      let recordTemplateSequenceType = null
      if (this.type === 1) {
        parentId = this.groupTree[0].recordTemplateId || ''
        recordTemplateSequenceType = 1
      } else {
        parentId = this.groupTree[0].recordTemplateGroupId || ''
        recordTemplateSequenceType = 2
      }
      const data = {
        checkedSequence: draggingNode.data.sequence,
        parentId: parentId,
        previousSequence: dropNode.data.sequence,
        recordTemplateSequenceType: recordTemplateSequenceType
      }
      updateSequenceRecordTemplate(data).then((res) => {
        this.$emit('update-data')
      })
    },
    onKey(key) {
      return Math()
    }
  }
}
</script>

<style scope>
.move-drawer .el-drawer__body {
  text-align: right;
  padding-right: 20px;
}
.move-drawer .my-tree {
  padding-left: 20px;
  text-align: center;
}
</style>
